<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>${category.name}</title>
    <meta name="decorator" content="cms_default_${site.theme}"/>
    <meta name="description" content="${category.description}" />
    <meta name="keywords" content="${category.keywords}" />
    <style>
        .container{
            width:100%;
        }
        .advantage{
            width:100%;
            height:653px;
        }
        .advantage .row{
            width:1200px;
            height:100%;
            position:relative;
            margin:0 auto;
        }
        .advantage .row .title{
            position:relative;
        }
        .advantage .row .title .outter{
            position:absolute;
            left:-17px;
            top:160px;
        }
        .advantage .row .title .inner{
            position:absolute;
            left:-36px;
            top:137px;
        }
        .advantage .row .title .item1{
            text-align:left;
            width:30px;
            line-height:30px;
            color:#fff;
            position:absolute;
            left:90px;
            top:295px;
            font-size:30px;
        }
        .advantage .row .title .english{
            display:block;
            position:absolute;
            left:25px;
            top:222px;
            writing-mode: vertical-rl;
            height:200px;
        }
        .advantage .row .bgImg{
            width:660px;
            height:400px;
            position:absolute;
            left:67px;
            top:105px;
            z-index:-1;
        }
        .advantage .row .article{
            position:absolute;
            width:534px;
            height:306px;
            left:662px;
            top:156px;
            font-size:16px;
            word-wrap:break-word;
        }

        /*优选生活*/
        .life{
            width:100%;
            height:720px;
            background: transparent url(http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgnqGVyQUoqOiRwQQwgA840AU.jpg) no-repeat top;
        }
        .life .row{
            width:1200px;
            height:100%;
            color:#fff;
            position:relative;
            margin:0 auto;
        }
        .life .row .title{
            width:447px;
            height:108px;
            position:absolute;
            left:376px;
            top:91px;
        }
        .life .row .title h2{
            font-size:50px;
            font-family: 微软雅黑,"microsoft yahei";
            text-align: center;
            margin-bottom:20px;
        }
        .life .row .title p{
            text-align: center;
        }
        .life .row .content{
            width:100%;
            height:374px;
            display:flex;
            justify-content: space-between;
            align-items: center;
            position:absolute;
            left:8px;
            top:241px;
        }
        .life .row .content .smallImg{
            position:relative;
        }
        .life .row .content .travel{
            width:285px;
            height:100%;
        }
        .row .content .travel .smallTitle{
            position:absolute;
            left:18px;
            top:145px;
            font-size:16px;
        }
        .row .content .travel .introduce{
            position:absolute;
            left:18px;
            top:180px;
            width:260px;
        }
        .life .row .content .youxuan{
            width:285px;
            height:100%;
        }
        .row .content .youxuan .smallTitle{
            position:absolute;
            left:18px;
            top:347px;
            font-size:16px;
        }
        .row .content .youxuan .introduce{
            position:absolute;
            left:18px;
            top:10px;
            width:260px;
        }
        .life .row .content .photovoltaic{
            width:285px;
            height:100%;
        }
        .row .content .photovoltaic .smallTitle{
            position:absolute;
            left:18px;
            top:145px;
            font-size:16px;
        }
        .row .content .photovoltaic .introduce{
            position:absolute;
            left:18px;
            top:180px;
            width:260px;
        }
        .life .row .content .jingshui{
            width:285px;
            height:100%;
        }
        .row .content .jingshui .smallTitle{
            position:absolute;
            left:18px;
            top:347px;
            font-size:16px;
        }
        .row .content .jingshui .introduce{
            position:absolute;
            left:18px;
            top:10px;
            width:260px;
        }

        /*乐农服务*/
        .service{
            width:100%;
            height:720px;
            background: transparent url(http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgnqGVyQUoqOiRwQQwgA840AU.jpg) no-repeat top;
        }
        .service .row{
            width:1200px;
            height:100%;
            color:#fff;
            position:relative;
            margin:0 auto;
        }
        .service .row .title{
            width:447px;
            height:108px;
            position:absolute;
            left:376px;
            top:91px;
        }
        .service .row .title h2{
            font-size:50px;
            font-family: 微软雅黑,"microsoft yahei";
            text-align: center;
            margin-bottom:20px;
        }
        .service .row .title p{
            text-align: center;
        }
        .service .row .content{
            width:100%;
            height:374px;
            display:flex;
            justify-content: space-between;
            align-items: center;
            position:absolute;
            left:8px;
            top:241px;
        }
        .service .row .content .smallImg{
            position:relative;
        }
        .service .row .content .laowu{
            width:285px;
            height:100%;
        }
        .row .content .laowu .smallTitle{
            position:absolute;
            left:18px;
            top:145px;
            font-size:16px;
        }
        .row .content .laowu .introduce{
            position:absolute;
            left:18px;
            top:180px;
            width:260px;
        }
        .service .row .content .peixun{
            width:285px;
            height:100%;
        }
        .row .content .peixun .smallTitle{
            position:absolute;
            left:18px;
            top:347px;
            font-size:16px;
        }
        .row .content .peixun .introduce{
            position:absolute;
            left:18px;
            top:10px;
            width:260px;
        }
        .service .row .content .falv{
            width:285px;
            height:100%;
        }
        .row .content .falv .smallTitle{
            position:absolute;
            left:18px;
            top:145px;
            font-size:16px;
        }
        .row .content .falv .introduce{
            position:absolute;
            left:18px;
            top:180px;
            width:260px;
        }

        /*乐农生态*/
        .zoology{
            width:100%;
            height:720px;
            background: transparent url(http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgnqGVyQUoqOiRwQQwgA840AU.jpg) no-repeat top;
        }
        .zoology .row{
            width:1200px;
            height:100%;
            color:#fff;
            position:relative;
            margin:0 auto;
        }
        .zoology .row .title{
            width:447px;
            height:108px;
            position:absolute;
            left:376px;
            top:91px;
        }
        .zoology .row .title h2{
            font-size:50px;
            font-family: 微软雅黑,"microsoft yahei";
            text-align: center;
            margin-bottom:20px;
        }
        .zoology .row .title p{
            text-align: center;
        }
        .zoology .row .content{
            width:100%;
            height:374px;
            display:flex;
            justify-content: space-between;
            align-items: center;
            position:absolute;
            left:8px;
            top:241px;
        }
        .zoology .row .content .smallImg{
            position:relative;
        }
        .zoology .row .content .shangxia{
            width:285px;
            height:100%;
        }
        .row .content .shangxia .smallTitle{
            position:absolute;
            left:18px;
            top:145px;
            font-size:16px;
        }
        .row .content .shangxia .introduce{
            position:absolute;
            left:18px;
            top:180px;
            width:260px;
        }
        .zoology .row .content .goods{
            width:285px;
            height:100%;
        }
        .row .content .goods .smallTitle{
            position:absolute;
            left:18px;
            top:347px;
            font-size:16px;
        }
        .row .content .goods .introduce{
            position:absolute;
            left:18px;
            top:10px;
            width:260px;
        }
        .zoology .row .content .fangan{
            width:285px;
            height:100%;
        }
        .row .content .fangan .smallTitle{
            position:absolute;
            left:18px;
            top:145px;
            font-size:16px;
        }
        .row .content .fangan .introduce{
            position:absolute;
            left:18px;
            top:180px;
            width:260px;
        }
        .zoology .row .content .line{
            width:285px;
            height:100%;
        }
        .row .content .line .smallTitle{
            position:absolute;
            left:18px;
            top:347px;
            font-size:16px;
        }
        .row .content .line .introduce{
            position:absolute;
            left:18px;
            top:10px;
            width:260px;
        }
    </style>
</head>
<body>


<%--乐农优势--%>

<div class="advantage">
    <div class="row">
        <div class="title">
            <img src="http://13869797.s61i.faiusr.com/4/AD0I5cXOBhAEGAAgxZqVyQUoyI7JuQMwvgE4ogI.png" class="outter"/>
            <img src="http://13869797.s61i.faiusr.com/4/AD0I5cXOBhAEGAAg1JyVyQUomIC3ETCWAThk.png" class="inner"/>
            <span class="item1">${categoryList[0].name}</span>
            <span class="english">LENONG &nbsp; ADVANTAGE</span>
        </div>
        <div class="span6 pull-left bgImg">
            <img src="http://13869797.s61i.faiusr.com/4/AD0I5cXOBhAEGAAgiZyVyQUo-s2ILjCUBTiQAw.png"/>
        </div>
        <div class="pull-right article">
          ${categoryList[0].description}
        </div>
    </div>
</div>

<%--乐农生态--%>
<div class="zoology">
    <div class="row">
        <div class="title">
            <h2>乐农生态</h2>
            <p>——————&nbsp;&nbsp;&nbsp;LENONG ZOOLOGY&nbsp;&nbsp;&nbsp;——————</p>
        </div>
        <div class="content">
            <div class="shangxia">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAg2KSVyQUo_IiYmgYwnQI49gI.jpg"/>
                    <p class="smallTitle">商品+服务</p>
                    <p class="introduce">商品+服务商品+服务商品+服务商品+服务商品+服务商品+服务商品+服务商品+服务商品+服务</p>
                </div>
            </div>
            <div class="goods">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgk6WVyQUo0OjPsAMwnQI49gI.jpg"/>
                    <p class="smallTitle">线上+线下</p>
                    <p class="introduce">线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下</p>
                </div>
            </div>
            <div class="fangan">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgp6WVyQUo7sG-1AYwnQI49gI.jpg"/>
                    <p class="smallTitle">上行+下行</p>
                    <p class="introduce">上行+下行上行+下行上行+下行上行+下行上行+下行上行+下行上行+下行上行+下行上行+下行</p>
                </div>
            </div>
            <%--<div class="line">--%>
            <%--<div class="smallImg">--%>
            <%--<img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgnaWVyQUogbW4kQcwnQI49gI.jpg"/>--%>
            <%--<p class="smallTitle">线上+线下</p>--%>
            <%--<p class="introduce">线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下线上+线下</p>--%>
            <%--</div>--%>
            <%--</div>--%>
        </div>
    </div>
</div>

<%--优选生活--%>
<div class="life">
    <div class="row">
        <div class="title">
            <h2>${categoryList[2].name}</h2>
            <p>——————&nbsp;&nbsp;&nbsp;EXCELLENT LIFE&nbsp;&nbsp;&nbsp;——————</p>
        </div>
        <div class="content">
            <div class="travel">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAg2KSVyQUo_IiYmgYwnQI49gI.jpg"/>
                    <p class="smallTitle">乐农优选购</p>
                    <p class="introduce">乐农优选购乐农优选购乐农优选购乐农优选购乐农优选购乐农优选购乐农优选购乐农优选购乐农优选购</p>
                </div>
            </div>
            <div class="youxuan">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgk6WVyQUo0OjPsAMwnQI49gI.jpg"/>
                    <p class="smallTitle">乐农旅游</p>
                    <p class="introduce">乐农旅游乐农旅游乐农旅游乐农旅游乐农旅游乐农旅游乐农旅游乐农旅游乐农旅游乐农旅游乐农旅游</p>
                </div>
            </div>
            <div class="photovoltaic">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgp6WVyQUo7sG-1AYwnQI49gI.jpg"/>
                    <p class="smallTitle">低碳生活</p>
                    <p class="introduce">低碳生活低碳生活低碳生活低碳生活低碳生活低碳生活低碳生活低碳生活低碳生活低碳生活低碳生活</p>
                </div>
            </div>
            <%--<div class="jingshui">--%>
            <%--<div class="smallImg">--%>
            <%--<img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgnaWVyQUogbW4kQcwnQI49gI.jpg"/>--%>
            <%--<p class="smallTitle">净水设备</p>--%>
            <%--<p class="introduce">净水设备净水设备净水设备净水设备净水设备净水设备净水设备净水设备净水设备净水设备净水设备</p>--%>
            <%--</div>--%>
            <%--</div>--%>
        </div>
    </div>
</div>

<%--乐农服务--%>
<div class="service">
    <div class="row">
        <div class="title">
            <h2>乐农服务</h2>
            <p>——————&nbsp;&nbsp;&nbsp;LENONG SERVICE&nbsp;&nbsp;&nbsp;——————</p>
        </div>
        <div class="content">
            <div class="laowu">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAg2KSVyQUo_IiYmgYwnQI49gI.jpg"/>
                    <p class="smallTitle">职业培训</p>
                    <p class="introduce">职业培训职业培训职业培训职业培训职业培训职业培训职业培训职业培训职业培训职业培训职业培训</p>
                </div>
            </div>
            <div class="peixun">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgk6WVyQUo0OjPsAMwnQI49gI.jpg"/>
                    <p class="smallTitle">劳务输出</p>
                    <p class="introduce">劳务输出劳务输出劳务输出劳务输出劳务输出劳务输出劳务输出劳务输出劳务输出劳务输出劳务输出</p>
                </div>
            </div>
            <div class="falv">
                <div class="smallImg">
                    <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgp6WVyQUo7sG-1AYwnQI49gI.jpg"/>
                    <p class="smallTitle">法律援助</p>
                    <p class="introduce">法律援助法律援助法律援助法律援助法律援助法律援助法律援助法律援助法律援助法律援助法律援助</p>
                </div>
            </div>
            <%--<div class="falv">--%>
            <%--<div class="smallImg">--%>
            <%--<img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgnaWVyQUogbW4kQcwnQI49gI.jpg"/>--%>
            <%--<p class="smallTitle">净水设备</p>--%>
            <%--<p class="introduce">净水设备净水设备净水设备净水设备净水设备净水设备净水设备净水设备净水设备净水设备净水设备</p>--%>
            <%--</div>--%>
            <%--</div>--%>
        </div>
    </div>
</div>



</body>
</html>
